<template>
  <div class="project-permission">
    <el-card>
      <!-- 标题头 -->
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-bottom: 5px;
          "
        >
          <img
            src="@/assets/img/tuanduihuizong.png"
            style="height: 17px; margin-right: 5px"
          />
          {{ headName }}用户组
        </span>
        <div class="xhxBox"></div>
      </div>
      <div class="form" style="margin-top: 2%">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="15">
            <el-form-item label="用户组名称" prop="userName">
              <el-input
                v-model.trim="formData.userName"
                placeholder="请输入用户组名称"
                clearable
                maxlength="10"
                style="width: 200px"
                v-bind:disabled="disabled"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15" style="border-bottom: 1px #eee solid">
            <el-form-item label="添加用户" prop="addUser">
              <!--  -->
              <el-input v-model="inputValue" style="width: 200px">
                <el-button
                  style="padding-right: 10px"
                  slot="prefix"
                  type="text"
                  @click="userBoxShow"
                >
                  <span style="border-bottom: 1px solid; color: #467ef7"
                    ><i class="el-icon-plus"></i>添加用户</span
                  >
                </el-button>
              </el-input>

              <div class="group">
                <div v-for="tag in dynamicTags" :key="tag" class="group-item">
                  {{ tag.nickName
                  }}<i
                    v-show="!tag.tb"
                    class="el-icon-close"
                    style="
                      margin-left: 5px;
                      margin-top: 2px;
                      font-weight: bold;
                      cursor: pointer;
                    "
                    :disable-transitions="false"
                    @click="handleClose(tag)"
                  ></i>
                </div>
              </div>

              <!--  -->
              <!-- <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
              style="margin-right:5px"
            >
              {{ tag.nickName }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>

            <el-button
              type="primary"
              @click="drawer = true"
            >
              + 添加用户
            </el-button> -->
            </el-form-item>
          </el-col>

          <el-col :span="24" style="margin-top: 40px">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm" style="width: 110px"
                >提 交</el-button
              >
              <!-- <el-button @click="resetForm">重置</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <!-- 用户组 -->
      <el-dialog :visible.sync="drawer" title="添加用户" width="660px" center>
        <!--搜索-->
        <div>
          <el-form :inline="true" label-position="left" label-width="85px">
             <!-- <el-row> -->
                   <el-col :span="12">
            <el-form-item label="用户账号：">
              <el-input
                maxlength="20"
                clearable
                v-model.trim="queryParams.userName"
                placeholder="以用户账号查询"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户昵称：">
              <el-input
                maxlength="20"
                clearable
                v-model.trim="queryParams.nickName"
                placeholder="以用户账号查询"
                style="width: 200px"
              ></el-input>
            </el-form-item>
                </el-col>
             <!-- </el-row> -->
            <el-form-item label="用户组名称">
              <el-select
              v-model="queryParams.ugName"
              placeholder="请选择状态"
              clearable
              filterable
              style="width: 200px"
            >
              <el-option
                v-for="(item, index) in postList"
                :key="index"
                :label="item.ugName"
                :value="item.ugId"
                style="padding-bottom: 40px; margin-bottom: 5px"
              ></el-option>
            </el-select>
            </el-form-item>
            <span style="text-align: center; margin-left: 10px">
              <el-button type="primary" icon="el-icon-search" @click="getData(1)"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="toggleSelection"
                >添加</el-button
              >
            </span>
          </el-form>
        </div>
        <!--表格-->
        <div>
          <!--  -->
          <el-table
            :data="tableData"
            style="width: 100%"
            height="300px"
            @selection-change="checkShow"
            :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
          >
            <el-table-column type="selection" width="55" align="center">
              <template slot-scope="scope">
                <!-- <el-checkbox v-model="scope.row.flag"> -->
                <el-checkbox
                  v-model="scope.row.flag"
                  v-if="
                    paramDataSettion.ugName != '默认用户组' || !scope.row.tb
                  "
                >
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="用户昵称"
              align="center"
              show-overflow-tooltip="true"
            />
            <el-table-column
              prop="ugName"
              label="用户组名称"
              align="center"
              show-overflow-tooltip="true"
            />
            <el-table-column
              prop="userName"
              label="用户账号"
              align="center"
              show-overflow-tooltip="true"
            />
          </el-table>
          <!--  -->
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  selectUserGroupRelaList,
  addUserGroup,
  updateUserGroup,
  selectByUserGroupList,
} from "@/api/base/index.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      //用户租下拉列表
      postList:[],
      //标题名称
      headName: "",
      // 是否全选
      checkBox: 0,
      // 用户组名称输入框是否禁用
      disabled: false,
      // 添加的人数数据
      dynamicTags: [
        // { name: "王二蛋" }
      ],
      // 表格选中取消人员的暂存数据
      multipleSelection: [],
      inputVisible: false,
      inputValue: "",
      // 弹窗用户名称数据
      tableData: [
        {
          date: "11",
          id: 1,
          name: "王二狗",
          address: "axcvxcvxcvcxvxcxvsd",
          code: true,
        },
        {
          id: 2,
          date: "14",
          name: "赵建设",
          address: "qwe",
          code: false,
        },
        {
          id: 3,
          date: "235234",
          name: "常国庆",
          address: "rhtyr",
          code: false,
        },
        {
          id: 4,
          date: "3456345",
          name: "李秀芹",
          address: "egre",
          code: true,
        },
      ],
      // 弹窗搜索数据
      queryParams: {
        nickName: "",
        userName: "",
      },
      // 弹窗搜索数据
      queryParams1: {},
      // 从右到左弹窗
      drawer: false,
      formData: {
        userName: undefined,
        addUser: undefined,
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户组名称",
            trigger: "blur",
          },
        ],
      },
      // 用户组进来之前保存的数据
      paramDataSettion: {},
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.getparam();
    this.getData();
  },
  methods: {
    async getData(row) {
      const param2 = JSON.parse(localStorage.param);
      this.paramDataSettion = param2;
      const paramCode = JSON.parse(localStorage.code);
      console.log(param2, "222");
      if (paramCode) {
        this.headName = "编辑";
      } else {
        this.headName = "新增";
      }
      let param = {
        nickName: this.queryParams.nickName,
        userName: this.queryParams.userName,
        userGroupId:this.queryParams.ugName,
        ugId: param2.ugId,
      };
      console.log(param, "搜索数据");
      const data = await selectUserGroupRelaList(param);
      console.log(data, "获取数据");

      // 查询已经是是true的人数并显示出来
      const pxData = data.data.groupRelaList.filter(
        (item) => item.flag == true
      );
      //如果是默认用户组进来的话，就移除取消功能
      if (param2.ugName == "默认用户组") {
        pxData.forEach((item) => {
          item.tb = true;
        });
      }

      this.dynamicTags = pxData;

      // 用户组表格添加
      if (data.code == 200) {
        //如果是默认用户组进来的话，就把已经添加的数据移除，不让用户取消
        if (param2.ugName == "默认用户组") {
          // this.tableData = data.data.groupRelaList.filter(
          //   (item) => item.ugName !="默认用户组"
          // );
          console.log(data.data.groupRelaList, "2222");
          this.tableData = data.data.groupRelaList;
        } else {
          this.tableData = data.data.groupRelaList;
        }
        this.formData.userName = param2.ugName;
      };
      if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }
    },
    //打开添加用户弹窗
    userBoxShow() {
      selectByUserGroupList().then((res) => {
        // console.log(res, "列表");
        this.postList = res.data;
      });
      this.drawer = true;
    },

    checkShow(rows) {
      if (this.checkBox == 0) {
        this.tableData.map((row) => {
          row.flag = true;
        });
        this.checkBox = 1;
      } else {
        if (this.paramDataSettion.ugName == "默认用户组") {

          this.tableData.forEach((item) => {
            if (item.ugName == "默认用户组") {
              item.flag = true;
            } else {
              item.flag = false;
            }
          });
          this.checkBox = 0;
        } else {
          this.tableData.map((row) => {
            row.flag = false;
          });
          this.checkBox = 0;
        }
      }
    },

    // 提交按钮
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) {
        } else {
          console.log(this.dynamicTags, "添加的人数");
          console.log(this.formData.userName, "用户组名称");
          const code = localStorage.getItem("code");
          console.log(code, "0是新增1是编辑");
          const userId = this.dynamicTags.map((item) => item.userId);
          let param = {
            ugName: this.formData.userName, //用户组名称
            userIdList: userId, //添加人数ID
          };
          console.log(param, "提交后的数据");
          if (code == "0") {
            console.log("新增");
            addUserGroup(param).then((res) => {
              console.log(res, "结果");
              if ((res.code = 200)) {
                this.$message({
                  type: "success",
                  message: "新增成功！",
                });
                this.formData.userName = "";
                this.dynamicTags = [];
                this.$router.push("/base/userGroup");
              } else {
                this.$message.error("新增失败！");
              }
            });
          } else {
            // const paramData = localStorage.getItem("param");
            const paramData = JSON.parse(localStorage.param);

            console.log(userId, "编辑");
            console.log(this.dynamicTags, "添加的人数");
            console.log(this.formData.userName, "用户组名称");
            console.log(paramData.ugId, "用户组ID");
            const parpamrm = this.dynamicTags.map((item) => {
              return {
                ugId: paramData.ugId,
                userId: item.userId,
              };
            });

            let Data = {
              groupRelaList: parpamrm,
              userGroup: {
                ugId: paramData.ugId, //用户组ID
                ugName: this.formData.userName, //用户组名称
              },
            };
            console.log(Data, "canshu");
            updateUserGroup(Data).then((res) => {
              console.log(res, "编辑结果0000000000");
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功！",
                });
                this.$router.push("/base/userGroup");
                //  this.getData();
              } else {
                this.$message.error("编辑失败！");
              }
            });
          }
        }

        // TODO 提交表单
      });
    },
    //   ..弹窗数据选择和取消获取数据
    handleSelectionChange(val) {
      console.log(this.val, "全部选中");
      // this.multipleSelection = val;
      //  console.log(this.tableData,'全部选中')
    },
    //   确定添加人员按钮
    toggleSelection() {
      const data = this.tableData.filter((item) => item.flag == true);

      this.dynamicTags = data;
      this.drawer = false; //点击确定添加以后就关闭弹窗

      // console.log(this.multipleSelection,'确定添加按钮');
    },
    //   删除人数函数
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style scoped>
/* 弹窗屏幕居中 */
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.xhxBox {
  height: 5px;
  border-top: 1px #eee solid;
  margin: 8px 0px 20px 0px;
}
</style>
<style>
.project-permission {
  margin: 15px;
}

.project-permission .el-card__body {
  min-height: 800px;
}

.project-permission .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border: none;
}

.project-permission .form {
  width: 800px;
  margin: auto;
}

.project-permission .form .el-form .row {
  display: flex;
}

.project-permission .form .el-form .row .el-form-item:first-child {
  margin-right: 100px;
}

.project-permission .form .el-form .row .el-radio-group {
  margin-left: 20px;
}

.project-permission .form .el-form {
  margin: auto;
}

.project-permission .form .el-form .button {
  margin: auto;
  text-align: center;
}

.project-permission .el-divider--horizontal {
  background: #f0f0f0;
}

.project-permission .form .group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  /* border: 1px red solid; */
}

.project-permission .form .group .group-item {
  display: flex;
  align-items: center;
  background: #e8f4ff;
  margin-right: 15px;
  /* height: 20px; */
  height: 30px;
  color: #4f86f7;
  font-size: 10px;
  margin-bottom: 15px;
  padding: 10px 5px;
  border-radius: 3px;
  border: 1px solid #e8f4ff;
}

.project-permission .el-dialog__headerbtn .el-dialog__close {
  color: #a39b9f;
  font-size: 25px;
}

.project-permission .el-dialog {
  border-radius: 5px;
}

.project-permission .el-dialog .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  width: 90%;
  margin: auto;
  padding-left: 0;
}

.project-permission .el-dialog__body {
  padding-left: 26px;
}

.project-permission .el-checkbox__input .el-checkbox__inner {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.project-permission .unselected.el-checkbox__input .el-checkbox__inner::before {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 1px;
  left: -2px;
  position: absolute;
  top: 7px;
  width: 20px;
}

.project-permission .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: white;
}

.project-permission .el-checkbox__input .el-checkbox__inner::after {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  position: absolute;
  top: 2px;
  width: 4px;
  transform: rotate(45deg) scaleY(1);
}
</style>
